<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <div class="adminW">
          Qr二维码管理系统
        </div>
        <div style="margin-right: 350px; font-weight: 700;color: #e0e7f3">
          <img src="../assets/admin.svg" alt="" style="margin-top: 10px;height: 32px;width: 32px;">
          <div style="margin-bottom: 10px;display: inline-block">管理员：{{this.username}}</div>
        </div>
        <el-dropdown class="userInfo" @command="commandHander">
<!--            <span class="el-dropdown-link">-->
<!--              选项<i></i>-->
<!--            </span>-->
          <img
              src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
              alt=""
              class="icon1"
          >
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="setting">设置</el-dropdown-item>
                      <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                    </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px" style="height:100vh;background-color: rgb(48, 65, 86)">
          <el-menu router unique-opened
                   mode="vertical"
                   default-active="Manager"
                   active-text-color="#ffd04b"
                   background-color="rgb(48, 65, 86)"

          >
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-c-scale-to-original"></i>
              <span style="margin-right: 50px">后台管理</span>
              </template>
              <el-menu-item index="Manager">
                <i class="el-icon-user-solid"></i>用户信息
              </el-menu-item>
              <el-menu-item index="LinkList">
                <i class="el-icon-user-solid"></i>链接管理
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!=='/HomePage'">
            <el-breadcrumb-item :to="{ path: '/HomePage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/HomePage'">
            这里还什么都没有.....

          </div>
          <el-form>
            <el-form-item>


            </el-form-item>
          </el-form>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "AdminPage",
  data(){
    return{
      username: '',
      user: window.sessionStorage.getItem('user')
    }
  },
  computed:{
    routes(){
      return this.$store.state.routes;
    }
  },

  methods:{
    commandHander(command){
      if(command=='logout'){
        this.$confirm('此操作将注销登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //注销登录
          this.postRequest('/logout');
          //清空用户信息
          window.sessionStorage.removeItem('tokenStr');
          window.sessionStorage.removeItem('user');
          this.$store.commit('initRoutes',[]);
          this.$router.replace('/login');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });

      }
    },
    getUserM(){
      var username= window.sessionStorage.getItem("username");
        this.username = username;

    },
  },
  mounted() {
    this.getUserM();
  }
}
</script>

<style>
  .adminW {
    color: #e0e7f3;
    font: italic 700 32px 'Arical';
    margin-left: 30px;
  }

  .homeHeader{
    background: #7040ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .homeHeader .title{
    font-size: 20px;
    font-family: 华文楷体;
    color: #f5bbb3;
  }

  .homeHeader .userInfo{
    cursor: pointer;
  }

  .homeWelcome{
    text-align: center;
    font-size: 30px;
    font-family: 华文楷体;
    color: #40d2ff;
    padding-top: 50px;
  }
</style>
